<div>
  <div class="kuiSideBarFormRow">
    <label class="kuiSideBarFormRow__label" for="colorSchema">
      Color Schema
    </label>
    <div class="kuiSideBarFormRow__control">
      <select
        id="colorSchema"
        class="kuiSelect kuiSideBarSelect"
        ng-model="vis.params.colorSchema"
        ng-options="mode for mode in collections.colorSchemas"
      ></select>
    </div>
    <div
      class="text-info text-center"
      ng-show="customColors"
      ng-click="resetColors()"
      kbn-accessible-click
    >
      reset colors
    </div>
  </div>

  <div class="kuiSideBarFormRow">
    <label class="kuiSideBarFormRow__label" for="invertColors">
      Reverse Color Schema
    </label>
    <div class="kuiSideBarFormRow__control">
      <input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="vis.params.invertColors">
    </div>
  </div>

  <div class="kuiSideBarFormRow">
    <label class="kuiSideBarFormRow__label" for="axisScale">
      Color Scale
    </label>
    <div class="kuiSideBarFormRow__control">
      <select
        id="axisScale"
        class="kuiSelect kuiSideBarSelect"
        ng-model="vis.params.valueAxes[0].scale.type"
        ng-options="mode for mode in collections.scales"
      ></select>
    </div>
  </div>

  <div class="kuiSideBarFormRow">
    <label class="kuiSideBarFormRow__label" for="defaultYExtents">
      Scale to Data Bounds
    </label>
    <div class="kuiSideBarFormRow__control">
      <input class="kuiCheckBox" id="defaultYExtents" type="checkbox" ng-model="vis.params.valueAxes[0].scale.defaultYExtents">
    </div>
  </div>

  <div class="kuiSideBarFormRow" ng-if="!vis.params.setColorRange">
    <label class="kuiSideBarFormRow__label" for="percentageMode">
      Percentage Mode
    </label>
    <div class="kuiSideBarFormRow__control">
      <input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="vis.params.percentageMode">
    </div>
  </div>

  <div class="kuiSideBarFormRow" ng-if="!vis.params.setColorRange">
    <label class="kuiSideBarFormRow__label" for="colorsNumber">
      Number of colors
    </label>
    <div class="kuiSideBarFormRow__control">
      <input
        id="colorsNumber"
        class="kuiSideBarInput"
        ng-model="vis.params.colorsNumber"
        type="number"
        greater-than="1"
        less-than="11"
      >
    </div>
  </div>

  <div>
    <div class="kuiSideBarCollapsibleTitle">
      <div
        class="kuiSideBarCollapsibleTitle__label"
        ng-click="toggleColorRangeSection()"
        kbn-accessible-click
        aria-expanded="{{!!showColorRange}}"
        aria-controls="heatmapOptionsRanges"
        aria-label="Toggle custom ranges options"
      >
        <span
          aria-hidden="true"
          ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
        ></span>
        <span class="kuiSideBarCollapsibleTitle__text">
          Custom Ranges
        </span>
      </div>
      <input
        aria-label="Enable custom ranges"
        ng-model="vis.params.setColorRange"
        type="checkbox"
        class="kuiSideBarSectionTitle__action"
        ng-click="toggleColorRangeSection(true)"
        kbn-accessible-click
      >
    </div>

    <div
      id="heatmapOptionsRanges"
      ng-if="vis.params.setColorRange"
      ng-show="showColorRange"
      class="kuiSideBarCollapsibleSection"
    >
      <div class="kuiSideBarSection">
        <table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.colorsRange.length">
          <tr>
            <th scope="col">
              <label id="heatmapCustomRangeFrom">From</label>
            </th>
            <th scope="col" colspan="2">
              <label id="heatmapCustomRangeTo">To</label>
            </th>
          </tr>

          <tr ng-repeat="range in vis.params.colorsRange track by $index">
            <td>
              <input
                aria-labelledby="heatmapCustomRangeFrom"
                ng-model="range.from"
                type="number"
                class="form-control"
                name="range.from"
                greater-or-equal-than="{{getGreaterThan($index)}}"
                step="any" />
            </td>
            <td>
              <input
                aria-labelledby="heatmapCustomRangeTo"
                ng-model="range.to"
                type="number"
                class="form-control"
                name="range.to"
                greater-than="range.from"
                step="any" />
            </td>
            <td>
              <button
                type="button"
                ng-click="removeRange($index)"
                class="kuiButton kuiButton--danger kuiButton--small"
              >
                <span class="kuiIcon fa-times"></span>
              </button>
            </td>
          </tr>
        </table>

        <div class="hintbox" ng-show="!vis.params.colorsRange.length">
          <p>
            <span class="kuiIcon fa-danger text-danger"></span>
            <strong>Required:</strong> You must specify at least one range.
          </p>
        </div>

        <button
          ng-click="addRange()"
          class="kuiButton kuiButton--primary kuiButton--fullWidth"
        >
          Add Range
        </button>
        <div class="euiSpacer euiSpacer--s"></div>
        <div class="text text-center text-info">Note: colors can be changed in the legend</div>
      </div>
    </div>
  </div>
  <div>
    <div class="kuiSideBarCollapsibleTitle">
      <div
        class="kuiSideBarCollapsibleTitle__label"
        ng-click="toggleLabelSection()"
        kbn-accessible-click
        aria-expanded="{{!!showLabels}}"
        aria-controls="heatmapOptionsLabels"
      >
        <span
          aria-hidden="true"
          ng-class="{
          'fa-caret-down': showLabels,
          'fa-caret-right': !showLabels
          }"
          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
        ></span>
        <span class="kuiSideBarCollapsibleTitle__text">
          Show Labels
        </span>
      </div>
      <input
        aria-label="Show labels"
        ng-model="vis.params.valueAxes[0].labels.show"
        type="checkbox"
        class="kuiSideBarSectionTitle__action"
      >
    </div>
    <div
      id="heatmapOptionsLabels"
      ng-if="vis.params.valueAxes[0].labels.show"
      ng-show="showLabels"
      class="kuiSideBarCollapsibleSection"
    >
      <div class="kuiSideBarSection">
        <div class="kuiSideBarFormRow">
          <label class="kuiSideBarFormRow__label" for="rotateLabels">
            Rotate
          </label>
          <div class="kuiSideBarFormRow__control">
            <input class="kuiCheckBox" id="rotateLabels" type="checkbox" ng-model="options.rotateLabels">
          </div>
        </div>

        <div class="kuiSideBarFormRow">
          <label class="kuiSideBarFormRow__label" for="labelColor">
            Color
          </label>
          <div class="kuiSideBarFormRow__control">
            <input
              id="labelColor"
              class="kuiSideBarInput"
              ng-model="vis.params.valueAxes[0].labels.color"
            >
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
